<template>
    <el-row style="margin-bottom:70px">
        <el-col class="header">
            <i class="el-icon-back" style="font-size:25px" @click="backToMy()"></i>
            <el-input
                placeholder="Type something"
                prefix-icon="el-icon-search"
            />
        </el-col>
        <el-col class="things" v-for="item in thingsList" v-bind:key="item">
            <div><el-avatar shape="square" :size="110" :src="item.imgUrl"></el-avatar></div>
            <div>
                <span style="font-size:18px;font-weight:bold">{{item.name}}</span>
                <p>{{item.deriction}}</p>
                <div style="display: flex;flex-direction: row;" class="tags">
                    <el-tag v-for="i in item.tags" v-bind:key="i">{{i}}</el-tag>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { useRouter } from 'vue-router'
import { getCurrentInstance } from '@vue/runtime-core'
import cookieUtil from '../utils/cookiesUtil.js'
export default {
    setup() {
        const instance = getCurrentInstance();
        const ctx = instance.appContext.config.globalProperties
        let token = cookieUtil.getCookie("token")

        let thingsList = reactive([]);
        
        let router = useRouter();
        function backToMy(){
            router.push("/mymeun")
        }

        function getAsideThings(){
            ctx.$http.get('http://localhost:8082/user/getAsideThings/'+token,{
                
            })
            .then(res=>{
                console.log(res);
                res.msg.forEach(e => {
                    thingsList.push(e)
                });
            }).catch(()=>{
                this.$message('服务器错误')
            })
        }
        return{
            thingsList,
            backToMy,
            router,
            token,
            getAsideThings
        }
    },
    beforeCreate() {
        document.querySelector('body').setAttribute('style', 'margin: 0px')
    },
    mounted(){
        this.getAsideThings();
    }
}
</script>
<style scoped>
.header{
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.header .el-input{
    margin-left: 10px;
}
.things{
    display: flex;
    flex: row;
    padding:5px;
    border-top: 2px solid rgb(177, 174, 174);
}
.things div{
    padding-left: 8px;
    display: flex;
    flex-direction: column;
}
.el-tag{
    margin-right: 6px;
}

</style>
